<template>
  <div>
    <div class="controls">
      <input autocomplete="off" class="itxt" :value="num" @blur="setInput" />
      <a href="javascript:" class="plus" @click="add">+</a>
      <a href="javascript:" class="mins" @click="minus">-</a>
    </div>
   
  </div>
</template>

<script>
export default {
  name: "CartWrap",
  props: ["count"],
  data() {
    return {
      num: 1,
      max: 20,
    };
  },
  methods: {
    add() {
      //不能大于库存
      if (this.num >= this.max) return;
      this.num++;
      this.$emit("input", this.num);
    },
    minus() {
      if (this.num <= 1) return;
      this.num--;
      this.$emit("input", this.num);
    },
    setInput(e) {
      let value = e.target.value;
      this.num = value;
    },
  },
  watch: {
    num(value, oldvalue) {
      if (value <= 1) {
        this.num = 1;
      } else if (value >= this.max) {
        this.num = this.max;
      }
      if (isNaN(value)) {
        this.num = oldvalue;
      }
      this.$emit("input", this.num);
    },
  },
};
</script>

<style scoped lang="less">
.cartWrap {
  .controls {
    width: 78px;
    position: relative;
    float: left;
    margin-right: 15px;

    .itxt {
      width: 68px;
      height: 32px;
      border: 1px solid #ddd;
      color: #555;
      float: left;
      border-right: 0;
      text-align: center;
      outline: none;
    }

    .plus,
    .mins {
      width: 15px;
      text-align: center;
      height: 17px;
      line-height: 17px;
      background: #f1f1f1;
      color: #666;
      position: absolute;
      right: -8px;
      border: 1px solid #ccc;
    }

    .mins {
      right: -8px;
      top: 19px;
      border-top: 0;
    }

    .plus {
      right: -8px;
    }
  }

  
}
</style>